<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- DPR in header -->
<img id=simple src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0">
<!-- fractional DPR -->
<img id=fractional src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=2.5">
<!-- DPR smaller than 1 -->
<img id=smaller src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=0.5">
<!-- DPR in srcset -->
<img id=srcset srcset="http://127.0.0.1:8000/resources/square100.png 4x">
<!-- invalid DPR in header -->
<img id=invalid src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=xx">
<!-- combine header with srcset -->
<img id="srcset_dpr_invalid" srcset="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=xx 4x">
<img id="srcset_dpr" srcset="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0 2x">
<!-- explicit width also given -->
<img id=width src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0"
     width="100" height="100">
<!-- explicit width also given -->
<img id=zero src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=0">
<script>
    var verify = function(id, size) {
        assert_equals(document.getElementById(id).naturalWidth, size);
        assert_equals(document.getElementById(id).naturalHeight, size);
    }

    addEventListener("load", function() {
        test(function() {
            verify("simple", 25);
            verify("fractional", 40);
            verify("smaller", 200);
            verify("srcset", 25);
            verify("invalid", 100);
            verify("srcset_dpr_invalid", 25);
            verify("srcset_dpr", 25);
            verify("width", 25);
            verify("zero", 100);
        }, "Test srcset and sizes with a meta viewport");
    }, false);
</script>
